<template>
  <section id="todo-form">
    <input
      type="text"
      class="addTodo"
      placeholder="请输入待办事项"
      @keyup.enter="addTodo2"
      v-model="inputTodo"
    >
    <button @click="addTodo">添加</button>

    <ul>
      <Item
        v-for="todo in todos"
        :key='todo.id'
        v-bind:todo="todo"
        @del="deleteTodo">
      </Item>
    </ul>
  </section>
</template>

<script>
  import Item from './item'

  let id = 0

  export default {
    name: "Todo",
    data: function(){
      return {
        todos: [
          // {
          //   'content': 'todo1',
          //   'isComplete': false
          // },{
          //   'content': 'todo2',
          //   'isComplete': false
          // }
        ],
        inputTodo: ''
      }
    },
    components: { //注意是对象不是数组
      Item,  // 全写  'Item': Item
    },
    methods: {
      addTodo(){
        // console.log(this.inputTodo)  // 转变思维，不需要doc.get()而是v-model绑定数据
        this.todos.push({
          'id': id++,
          'content': this.inputTodo,
          'isComplete': false
        })
        this.inputTodo = ''
      },
      deleteTodo(id){
        // console.log('event deleteTodo')
        this.todos.pop(id)
      }
    }
  }
</script>

<style scoped>

</style>